import React, { Component } from 'react';
import { Layout } from 'antd';

import UploadHeader from './uploadHeader';
import SortableList from './sortableList';
import Mainview from './mainview';

import styles from './index.less';

const { Header, Sider, Content } = Layout;

class Upload extends Component {
    constructor(props){
        super(props);
        this.state={
            styleParams:{
                scrHeight:window.innerHeight,
                headerHeight:100,
                sortableListWidth:150,
            },
            picInfoArr:[],
            sameNamePicArr:[]

            
        }
    }
    selectPic = () => {
        this.refs.file.click();
    }
    selectEnd = (e) => {
        const { picInfoArr, sameNamePicArr } = this.state;
        const windowURL = window.URL || window.webkitURL;
        const oFile = this.refs.file;
        let tempFakePicArr = [];
        let tempSameNameArr = [];
        tempFakePicArr = picInfoArr;
        for(let i=0; i<oFile.files.length; i++ ) {
            const singlePicUrl = windowURL.createObjectURL(oFile.files[i]);
            let singleFakeUrl = oFile.files[i].name;
            let isRepeat = true;
            for(let j=0; j<picInfoArr.length; j++){
                if(singleFakeUrl === picInfoArr[j].name) {
                    tempSameNameArr.push(singleFakeUrl);
                    isRepeat = false;
                }
                
            }
            if(isRepeat) {
                tempFakePicArr.push({
                    name:singleFakeUrl,
                    imageid:"idByMd5",
                    originalImage:"base64_String",
                    url:singlePicUrl,
                    deal:0
                })
            }
            
        }
        if(tempSameNameArr.length > 0){
            // 存在相同文件   --> message 提示
            console.log("存在相同文件");
        }
        this.setState({
            picInfoArr:tempFakePicArr,
            // sameNamePicArr:tempSameNameArr
        },()=>{
            // 调用预处理接口
            console.log("setState end!")
            console.log(this.state.picInfoArr)
        })

    }
    onSortEnd = (oldIndex,newIndex) => {
        console.log(oldIndex,newIndex);
        console.log(13);
    }



    render() {
        const { styleParams, picInfoArr } = this.state;
        const { scrHeight, headerHeight,sortableListWidth } = styleParams;
        return (
            <Layout className="upload">
                <div style={{height:headerHeight,background:'white',lineHeight:headerHeight+"px",display:"flex"}} className="uploadHeader">
                    <UploadHeader
                     styleParams={styleParams}
                     selectPic={this.selectPic}
                     />
                    <input 
                        multiple
                        accept=".png, .jpg, .jpeg, .gif" 
                        type="file" ref="file" 
                        style={{display:"none", height:0, width:0,position:"absolute"}}
                        onChange={(e)=>this.selectEnd(e)}
                        />
                </div>
                <div style={{height:scrHeight-headerHeight,display:"flex"}}>
                    <div style={{width:sortableListWidth,borderRight:"2px solid #999"}}>
                        <SortableList 
                            picInfoArr={picInfoArr}
                            onSortEnd={this.onSortEnd}
                        />
                    </div>
                    <div style={{flexGrow:1}} className="sortableList">
                        <Mainview />
                    </div>
                </div>
                
            </Layout>
            
        )
    }
}

export default Upload;